<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蛆蛆音乐</title>
    <link href="./icon/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="./css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="./css/icons-extra.css">
    <link rel="stylesheet" type="text/css" href="./css/app.css">
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/mui.js"></script>
    <script src="./js/jquery.cookie.js"></script>
    <style>
        a{
            touch-action: none;
        }
        img{
            width: 100%;
        }
        h4{
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        audio{
            width: 100%;
        }
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav" >
        <a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>
        <a id="info" class="mui-icon mui-icon-home mui-pull-right" href="/"></a>
        <a id="back" class="mui-icon mui-icon-back mui-pull-left" href=""></a>
        <h1 class="mui-title">{{$data}}</h1>
    </header>
    <!-- <div class="null" style="margin-bottom: 44px;"></div> -->
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item" data-addr="/" href="#tabbar">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" data-addr="/rank" href="#tabbar-with-chat">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="mui-tab-label">排行榜</span>
        </a>
        <a class="mui-tab-item" data-addr="/search" href="#tabbar-with-search">
            <span class="mui-icon mui-icon-search"></span>
            <span class="mui-tab-label">搜索</span>
        </a>
        <a class="mui-tab-item" data-addr="/collect" href="#tabbar-with-contact">
            <span class="mui-icon mui-icon-star"></span>
            <span class="mui-tab-label">收藏</span>
        </a>
        <a class="mui-tab-item" data-addr="/mine" href="#tabbar-with-map">
            <span class="mui-icon mui-icon-contact"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
    <script>
        $('.mui-bar-tab a').click(function(e){
                e.preventDefault()
                location.href = $(this).data().addr
        })
        $('.mui-bar-tab a').each(function(i){
            if($(this).data().addr == location.pathname){
                $(this).addClass('mui-active')
            }
        })
        console.log(location.pathname);
        $('#back').click(function(e){
            e.preventDefault()
            history.back()
        })
    </script>
    <!-- <form action="" method="GET">
        <div class="mui-input-row mui-search">
            <input type="search" class="mui-input-clear" placeholder="" name="keywords" id="keywords">
        </div>
    </form> -->
<!-- 以上为导航栏 -->